<template>
<div class="search-bar">
  <input
    v-model="searchText"
    placeholder="输入用户名或用户ID"
    class="search-input"
  />
  <button @click="searchUser">搜索</button>
</div>
  <div class="user-table">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>头像</th>
          <th>用户ID</th>
          <th>用户名</th>
          <th>手机号</th>
          <th>评分</th>
          <th>胜场</th>
          <th>败场</th>
          <th>平局</th>
          <th>总对战次数</th>
          <th>胜率</th>
          <th>注册时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, i) in userTable" :key="user.userId">
          <td>{{ i + 1 }}</td>
          <td>
            <img :src="userStore.avatarUrl(user.avatar)" alt="用户头像" />
          </td>
          <td>{{ user.userId }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.rating }}</td>
          <td>{{ user.wins }}</td>
          <td>{{ user.losses }}</td>
          <td>{{ user.draws }}</td>
          <td>{{ user.wins + user.losses + user.draws }}</td>
          <td>{{ calculateWinRate(user.wins, user.losses) }}</td>
          <td>{{ user.createdAt.slice(0, 10) }}</td>
          <td>
            <button @click="viewDetail(user.userId)">查看详情</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div
    v-if="dialogVisible"
    class="dialog-mask"
    @click.self="dialogVisible = false"
  >
    <div class="dialog-box">
      <div class="dialog-header">
        <img
          class="dialog-avatar"
          :src="userStore.avatarUrl(currentUser.avatar)"
          alt="用户头像"
        />
        <div class="dialog-title">用户详情</div>
      </div>
      <div class="dialog-info-list">
        <div class="info-row">
          <span>用户ID</span><b>{{ currentUser.userId }}</b>
        </div>
        <div class="info-row">
          <span>用户名</span><b>{{ currentUser.username }}</b>
        </div>
        <div class="info-row">
          <span>手机号</span><b>{{ currentUser.phone }}</b>
        </div>
        <div class="info-row">
          <span>评分</span><b>{{ currentUser.rating }}</b>
        </div>
        <div class="info-row">
          <span>胜场</span><b>{{ currentUser.wins }}</b>
        </div>
        <div class="info-row">
          <span>败场</span><b>{{ currentUser.losses }}</b>
        </div>
        <div class="info-row">
          <span>平局</span><b>{{ currentUser.draws }}</b>
        </div>
        <div class="info-row">
          <span>注册时间</span><b>{{ currentUser.createdAt?.slice(0, 10) }}</b>
        </div>
      </div>
      <button class="dialog-close" @click="dialogVisible = false">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import useNetStore from "../../stores/net.js";
import { useUserStore } from "../../stores/user";
let userStore = useUserStore();
let net = useNetStore();
const userTable = ref([]);
const allUsers = ref([]);
// 胜率计算
let calculateWinRate = (wins, losses) => {
  const totalGames = wins + losses;
  return totalGames > 0 ? ((wins / totalGames) * 100).toFixed(2) + "%" : "0%";
};
net
  .get("/users/userTable")
  .then((res) => {
    if (res.code === 200) {
      userTable.value = res.data;
      allUsers.value = res.data;
      // console.log(userTable.value)
      console.log(res.msg || "获取用户列表成功");
    } else {
      console.log(res.msg || "获取用户列表失败");
    }
  })
  .catch((err) => {
    console.error(err);
  });
const dialogVisible = ref(false);
const currentUser = ref(null);

function viewDetail(userId) {
  const user = userTable.value.find((u) => u.userId === userId);
  if (user) {
    currentUser.value = user;
    dialogVisible.value = true;
  }
}
// 搜索框
const searchText = ref("");

// 搜索方法
function searchUser() {
  const text = searchText.value.trim();
  // console.log(text)
  if (!text) {
    userTable.value = allUsers.value; // 为空显示全部
    return;
  }
userTable.value = allUsers.value.filter(
  (user) =>
    user.username.includes(text) ||
    (user.userId && String(user.userId).includes(text))
);
  console.log(userTable.value);
  console.log(allUsers.value);
}
// searchUser()
</script>

<style scoped>

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 12px 18px;
  background: #f7faff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(32,86,179,0.06);
  justify-content : center;  
}

.search-input {  
  flex: 0.4;
  padding: 8px 14px;
  border: 1.5px solid #bfc8d8;
  border-radius: 7px;
  font-size: 1rem;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
  background: #fff;  
}
.search-input:focus {
  border-color: #2056b3;
  box-shadow: 0 0 0 2px #e3eaf7;
}

.search-bar button {
  padding: 8px 22px;
  background: linear-gradient(90deg,#2056b3 60%,#4e8cff 100%);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(32,86,179,0.08);
}
.search-bar button:hover {
  background: linear-gradient(90deg,#183e7a 60%,#3576d1 100%);
}
.user-table {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(60, 60, 60, 0.06);
  max-width: 1200px;
  margin: 0px auto;
  padding-bottom: 60px;
  height: 80vh;
  overflow: auto;
  scrollbar-width: thin;
}

.user-table table {
  min-width: 100%;
  width: max-content;
  border-collapse: collapse;
  font-size: 1rem;
  background: #fafbfc;
}
.user-table table thead {
  position: sticky;
  top: 0;
  background: #f0f4fa;
  color: #2056b3;
  font-weight: 600;
  z-index: 2;
}

.user-table th,
.user-table td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid #eaeaea;
  white-space: nowrap;
}
.user-table tbody tr:nth-child(odd) {
  background: #f7faff;
}

.user-table tbody tr:nth-child(even) {
  background:rgb(235, 241, 242);
}
.user-table th {
  background: #f0f4fa;
  color: #2056b3;
  font-weight: 600;
}

.user-table tr:hover {
  background: #f5f8ff;
}

.user-table img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e7ef;
}
/* 详细信息弹窗 */
/* ...existing code... */
.dialog-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-box {
  background: #fff;
  border-radius: 18px;
  padding: 32px 36px 24px 36px;
  min-width: 340px;
  box-shadow: 0 8px 32px rgba(32, 86, 179, 0.13),
    0 1.5px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  text-align: center;
  animation: dialog-pop 0.22s;
  border: 1.5px solid #e3eaf7;
}

@keyframes dialog-pop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.dialog-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}

.dialog-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 3px solid #e0e7ef;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(32, 86, 179, 0.09);
  margin-bottom: 10px;
  background: #f6f8fa;
}

.dialog-title {
  font-size: 1.25rem;
  color: #2056b3;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 2px;
}

.dialog-info-list {
  margin: 0 auto 18px auto;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  color: #3a3a3a;
  background: #f7faff;
  border-radius: 6px;
  padding: 7px 14px;
  box-sizing: border-box;
  transition: background 0.2s;
}
.info-row span {
  color: #7a8ca7;
  font-weight: 500;
}
.info-row b {
  color: #2056b3;
  font-weight: 600;
  min-width: 80px;
  text-align: right;
}

.dialog-close {
  margin-top: 18px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 38px;
  background: linear-gradient(90deg, #2056b3 60%, #4e8cff 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1.08rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(32, 86, 179, 0.08);
  font-weight: 600;
  letter-spacing: 1px;
}
.dialog-close:hover {
  background: linear-gradient(90deg, #183e7a 60%, #3576d1 100%);
  box-shadow: 0 4px 16px rgba(32, 86, 179, 0.13);
}
</style>
